<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
    <style>
        .topmenu {
            width: 100%;
            height: 50px;
            background: #930E14;
            list-style-type: none;
        }
        .topmenu .nav .nav-container .nav-list {
            display: none;
            list-style-type: none;
        }
        /*点击⼀级菜单的时候显⽰⼆级菜单*/
        .topmenu .nav .nav-container:hover .nav-list {
            display: list-item;
            list-style-type: none;
            margin-left: -30px;
        }
        /*点击时变⾊*/
        .topmenu li:hover {
            background: lightskyblue;
            list-style-type: none;
        }
        /* ⼀级菜单栏.nav-container设置 */
        .topmenu .nav .nav-container {
            float: left;
            /* ⼀级菜单设置左浮动，使其⽔平排列 */
            background: #930E14;
            /*给整个⼀级菜单设置背景⾊（⼆级菜单包括在⼀级菜单中）*/
            text-align: center;
            /* 对齐⽅式为居中 */
            width: 155px;
            /*设置宽度*/
            border-right: solid 2px #fff;

            list-style-type: none;
            /*使⽤右边框分割*/
        }
        a {
            line-height: 50px;
            color: #fff;
            list-style-type: none;
        }
    </style>
</head>
<body>
<div class="topmenu">
    <ul class="nav">
        <li class="nav-container" style="margin-left: -30px;">
            <a >学生管理</a>
            <ul class="nav-list">
                <li>
                    <a href="http://localhost:9090/studentList.html">学生列表</a>
                </li>
            </ul>
        </li>
        <li class="nav-container">
            <a href="http://localhost:9090/basePersonInfo.html">个人信息</a>
        </li>
    </ul>
</div>

<div id="app">
    <el-table
            :header-cell-style="{ background: 'rgb(242,242,242)' }"
            style="width: 100%;margin-top:15px;"
            size="mini"
            :data="dataList"
            border
    >
        <el-table-column
                label="序号"
                fixed="left"
                width="50"
                align="center"
                color="black"
        >
            <template slot-scope="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column label="学号" align="center" color="black">
            <template slot-scope="scope">
                {{ scope.row.num }}
            </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" color="black">
            <template slot-scope="scope">
                <el-button
                        type="text"
                        @click="detailRow(scope.row.id)"
                        size="mini"
                > {{ scope.row.studentName }}</el-button
                >

            </template>
        </el-table-column>
        <el-table-column label="性别" align="center" color="black">
            <template slot-scope="scope">
                {{ scope.row.sex }}
            </template>
        </el-table-column>
        <el-table-column label="年龄" align="center" color="black">
            <template slot-scope="scope">
                {{ scope.row.age }}
            </template>
        </el-table-column>
        <el-table-column label="系别" align="center" color="black">
            <template slot-scope="scope">
                {{ scope.row.dept }}
            </template>
        </el-table-column>
    </el-table>

</div>


<script src="/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">

  let vm = new Vue({
    el: '#app',
    data () {
      return {
        accessToken: '',
        dataList:'',
      }
    },
    created() {
     axios({
            headers: {
                 'Authorization': 'Bearer ' + window.localStorage.accessToken
            },
            method: 'post',
            url: '/api/teach/studentInit',
            data: {
            }
      }).then(res => {
            this.dataList = res.data.data;
      })
    },
    methods: {
     detailRow(id) {
     window.location.href = "basePersonInfo.html?id="+id
    },
    }
  })
  </script>
</body>
</html>